<table #table data-toolbar="#toolbar">
</table>

<div id="toolbar">
<span class="btn btn-default" (click)="showAddUserModal()"><span class="fa fa-plus" style="margin-right: 5px"></span>增加</span>
    <span class="btn btn-default" data-toggle="modal" data-target="#searchModal"><span class="fa fa-search" style="margin-right: 5px"></span>搜索</span>
</div>

<div #editModal class="modal fade"  tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">新增数据</h4>
            </div>
            <div class="modal-body">

                <div class="form-group">
                    <label>登录账号</label>
                    <input type="text" class="form-control" [(ngModel)]="userEditForm.username" maxlength="50">
                </div>

                <div class="form-group">
                    <label>真实姓名</label>
                    <input type="text" class="form-control" [(ngModel)]="userEditForm.realname" maxlength="50">
                </div>

                <div class="form-group">
                    <label>联系电话(格式:号码1,号码2,号码3....)</label>
                    <input type="text" class="form-control" [(ngModel)]="userEditForm.tel" maxlength="100">
                </div>

                <div class="form-group">
                    <label>邮箱</label>
                    <input type="text" class="form-control" [(ngModel)]="userEditForm.email" maxlength="50">
                </div>

                <div class="form-group" *ngIf="userEditForm.id">
                    <label>是否修改密码</label>
                    <select class="form-control" [(ngModel)]="userEditForm.isSetPassword">
                        <option value="false">否</option>
                        <option value="true">是</option>
                    </select>
                </div>
                <div class="form-group" *ngIf="(userEditForm.isSetPassword=='true'&&userEditForm.id)||!userEditForm.id">
                    <label>设置密码</label>
                    <input type="password" class="form-control"  [(ngModel)]="userEditForm.password" maxlength="50">
                </div>

                <div class="form-group" *ngIf="(userEditForm.isSetPassword=='true'&&userEditForm.id)||!userEditForm.id">
                    <label>确认密码</label>
                    <input type="password" class="form-control"  [(ngModel)]="userEditForm.repassword" maxlength="50">
                </div>


                <div class="form-group">
                    <label >角色</label>
                    <select class="form-control" [(ngModel)]="userEditForm.roleId">
                        <option *ngFor="let type of roleList" [value]="type.id" >
                            {{type.name}}
                        </option>
                    </select>
                </div>


            </div>
            <div class="modal-footer">
                <div class="row">
                    <div class="col-xs-6">
                        <button type="button" class="btn btn-default" style="width: 100%" data-dismiss="modal">关闭
                        </button>
                    </div>
                    <div class="col-xs-6">
                        <button type="button" class="btn btn-primary" style="width: 100%" (click)="editUser()">保存
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" #searchModal id="searchModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">搜索</h4>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label>登录账号</label>
                    <input type="text" class="form-control" [(ngModel)]="filterForm.filterConditionForms[0].data">
                </div>
                <div class="form-group">
                    <label>真实姓名</label>
                    <input type="text" class="form-control" [(ngModel)]="filterForm.filterConditionForms[1].data">
                </div>
                <!--<div class="form-group">-->
                    <!--<label>联系电话</label>-->
                    <!--<input type="text" class="form-control" [(ngModel)]="filterForm.filterConditionForms[2].data">-->
                <!--</div>-->
                <!--<div class="form-group">-->
                    <!--<label>邮箱</label>-->
                    <!--<input type="text" class="form-control" [(ngModel)]="filterForm.filterConditionForms[3].data">-->
                <!--</div>-->
                <div class="form-group">
                    <label>角色</label>
                    <select class="form-control" [(ngModel)]="filterForm.filterConditionForms[2].data">
                        <option *ngFor="let type of roleList" [value]="type.id" >
                            {{type.name}}
                        </option>
                    </select>
                </div>
            </div>
            <div class="modal-footer">
                <div class="row">
                    <div class="col-xs-6">
                        <button type="button" class="btn btn-default" style="width: 100%" data-dismiss="modal"
                                (click)="initSearch()">清除搜索
                        </button>
                    </div>
                    <div class="col-xs-6">
                        <button type="button" class="btn btn-primary" style="width: 100%" (click)="search()">搜索
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<confirm-component #confrimDelete (getResult)="getDeleteResult($event)"></confirm-component>
